<!DOCTYPE html>
<script src="../../../../../resources/testharness.js"></script>
<script src="../../../../../resources/testharnessreport.js"></script>
<script src="../../../../../fast/spatial-navigation/resources/snav-testharness.js"></script>

<style>
  div {
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
    padding: 10px;
  }

  input {
    width: 90%;
    height: 90%;
  }
</style>

<div id="outside" tabindex="0">
  <input id="inside" type="text" value="text">
</div>

<script>
  // This test checks that focusless mode allows entering focus into an element
  // with the enter key and exiting it with the escape key.
  const outside = document.getElementById("outside");
  const inside = document.getElementById("inside");

  outside.addEventListener('click', () => {
    inside.focus();
  });

  test(() => {
    // Move interest to outer div. Click event will move focus to the input
    // inside. This is a common pattern on the web. Ensure escape key still
    // works in this scenario.
    snav.triggerMove('Down');
    eventSender.keyDown('Enter');

    assert_equals(document.activeElement,
                  inside,
                  "input box starts off focused");

    eventSender.keyDown('Escape');

    assert_not_equals(document.activeElement,
                      inside,
                      "input box unfocused by escape key");
  }, "Enter key moves focus into interested element");
</script>
